<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" content="测评进度"></el-page-header>
    </div>
    <div class="center">
      <!-- <el-row :gutter="20"> -->
        <!-- <el-col :span="10"><div class="centerTitle">{{this.$route.query.plan_title}}</div></el-col>
        <el-col :span="10"> -->
        <!-- <el-col :span="10" :offset="4" :xl="{span: 2, offset: 11}">
          <el-button type="primary" size="medium" @click="abnormityFn()">导出异常作答名单</el-button>
          <el-button v-if="this.menuList.includes('planUnfinished')" type="primary" size="medium" @click="exportFn()">导出未完成名单</el-button>
        </el-col> -->
      <!-- </el-row> -->
      <div style="display: flex;justify-content: space-between;">
        <div class="centerTitle">{{this.$route.query.plan_title}}</div>
        <div>
          <el-button type="primary" size="medium" @click="abnormityFn()">导出异常作答名单</el-button>
          <el-button v-if="this.menuList.includes('planUnfinished')" type="primary" size="medium" @click="exportFn()">导出未完成名单</el-button>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="progtessAllBox">
            <p>分发人次</p>
            <p class="tr">{{this.evaluate_number}}</p>
            <p class="tr">人次</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progtessAllBox">
            <p>已完成</p>
            <p class="tr">{{this.evaluate_completed_number}}</p>
            <p class="tr">人次</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progtessAllBox">
            <p>未完成</p>
            <p class="tr">{{this.not_finished_number}}</p>
            <p class="tr">人次</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progtessAllBox">
            <p>完成率</p>
            <p class="tr">{{this.completion_rate}}</p>
            <p class="tr">%</p>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <el-table border :data="tableData" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading">
          <template v-for="(item, index) in tableConfig.config">
            <!-- 操作 -->
            <template v-if="item.prop === 'operation'">
              <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
                <template slot-scope="scope">
                  <template v-if="scope.$index !==0">
                    <template v-if="scope.row.finish_status === '已完成'">
                      <el-button v-for="n in item.list" :key="n.id" @click="examine(scope.row, n.id, scope.$index)" type="text" size="small" :class="n.className">{{n.name}}</el-button>
                    </template>
                  </template>
                  <template v-else>
                    <el-button type="primary" round size="mini" @click="examine(scope.row, 'query', scope.$index)">查询</el-button>
                    <el-button type="text" @click="examine(scope.row, 'del', scope.$index)">清除</el-button>
                  </template>
                </template>
              </el-table-column>
            </template>
            <!-- 内容 -->
            <template v-else>
              <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
                <template slot-scope="scope">
                  <div v-if="scope.$index === 0">
                    <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                    <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                      <el-option v-for="item in item.optionsList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                  </div>
                  <div v-else >{{scope.row[item.prop]}}</div>
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%">
      <div v-for="item in dialogList" :key="item.id">
        <el-button type="text" @click="checkReport(item)">{{item.student_title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="下载" :visible.sync="dialogVisible2" width="30%">
      <div v-for="item in downloadList" :key="item.id">
        <el-button type="text" @click="downloadListFn(item.id)">{{item.student_title}}</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import {APIGETEVALUATIONPROGRESSPLAN, APIALLLEARNINGPERIOD, APIALLLGRADE, APIALLCLASS, APIEXPORTGETEVALUATIONPROGRESSPLAN, APIGETDOWNLOADREPORTPATH, getCheckExportExceptionData} from '@/common/api.js'
export default {
  data () {
    return {
      api: '',
      menuList: [],
      configRow: ['input', 'select', 'select', 'select', '', 'select', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        real_name: '',
        section_title: '',
        grade_title: '',
        class_title: '',
        evaluation_total_time: '',
        finish_status: Number,
        ts: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: true, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '学段',
            prop: 'section_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '年级',
            prop: 'grade_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '班级',
            prop: 'class_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '用时',
            prop: 'evaluation_total_time',
            align: 'center',
            modelValue: ''
          },
          {
            label: '完成情况',
            prop: 'finish_status',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '完成',
              id: 1
            }, {
              title: '未完成',
              id: 2
            }]
          },
          {
            label: '异常作答',
            prop: 'abnormal_status',
            align: 'center',
            modelValue: ''
          },
          {
            label: '完成时间',
            prop: 'ts',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        plan_id: '',
        real_name: '',
        section_id: '',
        grade_id: '',
        class_id: '',
        is_finish: ''
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogList: [],
      downloadList: [],
      report_id: '',
      evaluate_number: 0,
      completion_rate: 0,
      not_finished_number: 0,
      evaluate_completed_number: 0
    }
  },
  created () {
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('planShow')) {
      var operation1 = {id: 'seeReport', name: '查看报告'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('planDownload')) {
      var operation2 = {id: 'downloadReport', name: '下载报告'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    this.tableList()
    this.selectFn()
  },
  methods: {
    selectFn () {
      APIALLLEARNINGPERIOD().then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '学段') {
            element.optionsList = res.data
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '姓名') {
          this.form.real_name = element.modelValue
        }
        if (element.label === '学段') {
          this.form.section_id = element.modelValue
        }
        if (element.label === '年级') {
          this.form.grade_id = element.modelValue
        }
        if (element.label === '班级') {
          this.form.class_id = element.modelValue
        }
        if (element.label === '完成情况') {
          this.form.is_finish = element.modelValue
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.plan_id = this.$route.query.id
      this.form.page = this.page
      APIGETEVALUATIONPROGRESSPLAN(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.list.totalNumber
          this.currentPage = res.data.list.page
          res.data.list.list.forEach(item => {
            this.tableData.push(item)
          })
          this.evaluate_number = res.data.evaluate_number
          this.evaluate_completed_number = res.data.evaluate_completed_number
          this.completion_rate = res.data.completion_rate
          this.not_finished_number = res.data.not_finished_number
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    examine (row, id) {
      var val = {
        rows: row,
        id: id
      }
      this.goToOperation(val)
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') {
        this.dataProcessing()
      } else if (val.id === 'del') {
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'seeReport') { // 查看报告
        this.lookReport(val)
      } else if (val.id === 'downloadReport') {
        this.downloadFn(val)
      }
    },
    goBack () {
      this.$router.push({path: './measurementPlan'})
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    exportFn () {
      APIEXPORTGETEVALUATIONPROGRESSPLAN({
        plan_id: this.$route.query.id
      }).then((res) => {
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?plan_info=' + res.data.plan_info
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    lookReport (val) { // 平台推荐=>1 自建=>2 单个量表=>3
      this.dialogVisible = true
      this.dialogList = val.rows.sub_list
      if (val.rows.plan_type === 3 || val.rows.plan_type === 2) {
        this.dialogList.forEach(item => {
          if (item.id === 925984) { // 六大兴趣
            item.hrefStr = '/api/report/sixInterest'
          } else if (item.id === 181731) { // 职业价值观
            item.hrefStr = '/api/report/professionalValue'
          } else if (item.id === 132462) { // MBTI
            item.hrefStr = '/api/report/MBTICharacter'
          } else if (item.id === 329235) { // 九大智能高中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 689942) { // 九大智能初中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 867971) { // 中学生问题解决能力量表
            item.hrefStr = '/api/report/problemSolving'
          } else if (item.id === 756492) { // 中学生沟通能力量表
            item.hrefStr = '/api/report/communicationSkills'
          } else if (item.id === 976297) { // 学生人际合作能力评估报告
            item.hrefStr = '/api/report/InterpersonalCooperation'
          } else { // 单个量表
            item.hrefStr = '/api/report/getIndividualReportView'
          }
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      } else if (val.rows.plan_type === 1) {
        this.dialogList.forEach(item => {
          item.hrefStr = '/api/report/getRecommendIndividualReportView'
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      }
    },
    checkReport (row) {
      window.open(row.hrefStr + '?report_id=' + row.report_id + '&sid=' + row.id + '&token=' + row.token)
      this.dialogVisible = false
    },
    downloadFn (val) {
      this.dialogVisible2 = true
      this.downloadList = val.rows.sub_list
      this.report_id = val.rows.report_id
    },
    downloadListFn (id) {
      APIGETDOWNLOADREPORTPATH({
        report_id: this.report_id,
        sid: id
      }).then((res) => {
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    abnormityFn () {
      let data = {
        plan_id: this.$route.query.id,
        real_name: this.tableConfig.config[0].modelValue,
        section_id: this.tableConfig.config[1].modelValue,
        grade_id: this.tableConfig.config[2].modelValue,
        class_id: this.tableConfig.config[3].modelValue,
        is_finish: this.tableConfig.config[5].modelValue
      }
      getCheckExportExceptionData(data).then(res => {
        if (res.data.status === 1) {
          window.location.href = this.Api + res.data.data.url + '?plan_info=' + res.data.data.plan_info + '&token=' + sessionStorage.getItem('token')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  computed: {
    newGrade () {
      let grade
      this.tableConfig.config.forEach(element => {
        if (element.label === '学段') {
          grade = element.modelValue
        }
      })
      return grade
    },
    newClass () {
      let newClass
      this.tableConfig.config.forEach(element => {
        if (element.label === '年级') {
          newClass = element.modelValue
        }
      })
      return newClass
    }
  },
  watch: {
    newGrade (newV, oldV) {
      APIALLLGRADE({
        section_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '年级') {
            element.optionsList = res.data
          }
          if (element.label === '年级') {
            element.modelValue = ''
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    newClass (newV, oldV) {
      APIALLCLASS({
        grade_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '班级') {
            element.optionsList = res.data
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.progtessAllBox{
  width: 100%;
  height: 10vh;
  border-radius: 10px;
  border: 1px solid $roundColor;
  margin-top: 1vh;
  padding: 1vh 1vw;
  box-sizing: border-box;
  color: $secondaryFontColor;
}
.progtessAllBox>p:nth-child(2){
  height: 4vh;
  line-height: 4vh;
  color: $mainColor;
  font-weight: 700;
  font-size: $mainSize;
  padding-right: 2vw;
}
</style>
